<script setup>
import {defineProps, ref, onMounted, nextTick} from 'vue';
import VideoApi from "@/apis/VideoApi.js";
import {ElMessage} from "element-plus";

const isLiked = ref(false);

const showReplyBox = ref(false);

const replyBoxRef = ref(null)
const replyContent = ref('');

const CommentList = ref([]);

const props = defineProps({
  commentId: Number,
  userId: String | Number,
  time: String,
  content: String,
  likeNum: Number,
  videoid: String | Number,
  isChildren: Boolean,
});

function toggleLike() {
  isLiked.value = !isLiked.value;
}

function toggleReplyBox() {
  showReplyBox.value = !showReplyBox.value;
  if (showReplyBox.value) {
    nextTick(() => {
      // 自动聚焦到 textarea
      document.querySelector('.reply_box textarea')?.focus();
    });
  }
}

async function postReply() {
  try {
    const res = await VideoApi.commentVideoComment(props.commentId, replyContent.value)
    ElMessage.success('回复成功');
  } catch (e) {
    ElMessage.error('回复失败');
  }

  // 重新获取二级评论
  replyContent.value = '';
}

function toggledelete() {
    console.log("delete success")
}

// const fetchVideoSecondComment = async (cid) => {
//   const res = await VideoApi.fetchSecondComments(cid,10,1);
//   console.log('视频二级评论',res);
//   CommentList.value = res.data.comment_list
// }

</script>

<template>
<div class="post">
    <a class ="userimage">
        <img src="http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png">
    </a>
    <div class="post_title">
        <a class="username">{{ userId }}</a>
    </div>
    <a class="message">
        {{ content }}
    </a>
    <div class="post_info">
        <span class="date">{{ time }}</span>
        <span class="like" :class="{ 'liked': isLiked }" @click="toggleLike">
            <i class="iconfont icon-zan"/>
            {{ likeNum }}
        </span>
        <span class="reply" @click="toggleReplyBox">回复</span>
        <span class="delete" @click="toggledelete">删除</span>
    </div>
    <div v-if="showReplyBox" class="reply_box">
        <textarea ref="replyBoxRef" draggable="false" v-model="replyContent" placeholder="写下你的回复..."></textarea>
        <el-button @click="postReply">发表回复</el-button>
    </div>
    <div class="article_wrap">
        <a class="pic">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0">
        </a>
        <a class="article_title">
            <span class="name">{{ videoid }}</span>
        </a>
    </div>
</div>
<!--<Commentitem v-for="(comment, index) in CommentList" :key="comment.id"-->
<!--    :content="comment.comment_content"-->
<!--    :userId="comment.user_id"-->
<!--    :time="comment.time"-->
<!--    :likeNum="comment.likeNum"-->
<!--    :videoid="comment.video_id"-->
<!--&gt;-->
<!--</Commentitem>-->
</template>

<style scoped lang="less">
.post{
    background-color: white;
    position: relative;
    // margin-top: 40px;
    padding: 20px 175px 24px 96px;
    border-bottom: 1px solid #e7e7e7;

    .userimage{
        position: absolute;
        left: 40px;
        top: 20px;
        width: 40px;
        height: 40px;
        display: inline-block;

        img{
            width: 40px;
            height: 40px;
            display: inline-block;
            border-radius: 50%;
        }
    }

    .post_title{
        margin-bottom: 12px;
        color: #0f0f0f;
        font-size: 14px;
        line-height: 18px;

        .username{
            color: #757575;
            line-height: 18px;
        }
    }

    .message{
        margin-bottom: 16px;
        min-height: 1px;
        color: #212121;
        line-height: 18px;
        font-size: 14px;
        word-wrap: break-word;
    }

    .post_info{
        color: #99a2aa;
        font-size: 0;

        .date{
            font-size: 14px;
            color: #999;
            text-align: left;
            display: inline-block;
            line-height: 18px;
            margin-right: 23.5px;
        }

        .like{
            font-size: 14px;
            color: #999;
            text-align: left;
            display: inline-block;
            line-height: 18px;
            margin-right: 23.5px;

            .iconfont{
                vertical-align: middle;
                cursor: pointer;
                color: #999;

                &:hover{
                    color:#00a1d6;
                }
            }
        }

        .liked{
            color: blue; 
            .iconfont{
                fill: blue; 
            }
        }

        .reply,
        .delete{
            font-size: 14px;
            color: #999;
            text-align: left;
            display: inline-block;
            line-height: 18px;
            margin-right: 23.5px;
            cursor: pointer;

            &:hover{
                color:#00a1d6;
            }
        }
    }

    
    .reply_box {
        margin-top: 16px;
        position: relative;

        textarea {
            border: 1px solid #e7e7e7;
            border-radius: 2px;
            display: block;
            width: 100%;
            height: 84px;
            padding: 12px 16px;
            margin-bottom: 12px;
            word-break: break-all;
            line-height: 20px;
            color: #212121;

            &:focus,
            &:focus-visible,
            &:not(:placeholder-shown) {
                border-color: #00a1d6;
                outline: none; 
            }
        }

        button {
            background-color: #00a1d6;
            color: white;
            border-radius: 2px;
            border: 1px solid #00a1d6;
            padding: 4.5px 15px;
        }
    }

    .article_wrap{
        position: absolute;
        right: 20px;
        top: 20px;
        width: 100px;
        text-align: center; 
            
        .pic{
            display: block;
            width: 100px;
            height: 60px;
            background: #f1f3f7 url() no-repeat 50%;
            margin-bottom: 10px;
            border-radius: 4px;

            img{
            display: block;
            width: 100px;
            height: 60px;
            border-radius: 4px;
            }
        }
        
        .article_title{
            width: 100px;
            display: inline-block;

            .name{
                font-size: 12px;
                color: #505050;
            }
        }
    }
}

</style>